import { Tooltip } from "antd";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import styles from "./toolCropping.module.less";
import { TooltipProps } from "antd/lib/tooltip";
import editorStore from "@/editorComponent/editorStore";
import designEditor from "@/editorComponent/designEditor";
import clsx from "clsx";
import CroppingModel from "./CroppingModel/CroppingModel";
import FabricImage from "@/myFabric/FabricImage";
import fabricCropping from "./CroppingModel/fabricCropping";
import croppingModelStore from "./CroppingModel/croppingModelStore";
import utils from "@/utils/utils";

// 裁剪按钮
export default function ToolCropping() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);

  //设置裁剪弹窗工具的url
  const setUrl = () => {
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObject && activeObject.type === "image") {
      const url = (activeObject as FabricImage).getSrc();
      croppingModelStore.setUrl(utils.ossSuffix(url, 500));
    }
  }

  return (
    <>
      <div
        ref={dom}
        className={clsx(styles.toolCropping, visible && styles.visible, disable && styles.disable, hover && styles.hover)}
        onClick={setUrl}
      >
        裁剪
      </div>
      {/* 裁剪弹窗 */}
      <CroppingModel />
    </>
  );

}
